<template>
  <el-dialog
      v-model="visible"
      :title="!dataForm.id ? '新增' : '修改'"
      :close-on-click-modal="false">
    <el-form
        ref="dataFormRef"
        :model="dataForm"
        :rules="dataRules"
        label-width="100px"
        width="100px"
        @keyup.enter="submitHandle()">
      <el-row>
        <el-col :span="24">
          <el-form-item label="分组名称" prop="name">
            <el-input v-model="dataForm.name" placeholder="分组名称"></el-input>
          </el-form-item>
          <el-form-item prop="deptId" label="所属公司">
            <ma-org-select v-model="dataForm.deptId" placeholder="请选择"></ma-org-select>
          </el-form-item>
<!--          <el-form-item label="最短定位时间" prop="imei">-->
<!--            <el-input v-model="dataForm.imei" placeholder=""></el-input>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="最长定位时间" prop="simEndDate">-->
<!--            <el-input v-model="dataForm.simEndDate" placeholder="sim卡到期时间"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="用户总数" prop="maxUserNum">
            <el-input v-model="dataForm.maxUserNum" placeholder="用户总数"></el-input>
          </el-form-item>
          <el-form-item label="设备总数" prop="maxDeviceNum">
            <el-input v-model="dataForm.maxDeviceNum" placeholder="设备总数"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submitHandle()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import {groupSubmissions} from "@/api/gps/device";
const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const dataFormRef = ref()

const dataForm = ref({
  remark: '',
  crtTime: '',
  crtUserId: '',
  deptId: '',
  devices: undefined,
  id: '',
  maxDeviceNum: "1000",
  maxUserNum: "10",
  name: '',
  parentId: '',
})
const init = (data?) => {
  visible.value = true
  dataForm.value.id = ''
  // 重置表单数据
  dataForm.value = {
    remark: '',
    crtTime: '',
    crtUserId: '',
    deptId: '',
    devices: undefined,
    id: '',
    maxDeviceNum: "1000",
    maxUserNum: "10",
    name: '',
    parentId: '',
  }
  if (data.id) {
    Object.assign(dataForm.value,data)
  }
}

const dataRules = ref({
  deptId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
})

// 表单提交
const submitHandle = () => {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false
    }
    groupSubmissions(dataForm.value).then(() => {
      ElMessage.success({
        message: '操作成功',
        duration: 500,
        onClose: () => {
          visible.value = false
          emit('refreshDataList')
        }
      })
    })
  })
}

defineExpose({
  init
})
</script>
